<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>阿姨来了</title>
  <!-- <style src="./index.scss"></style> -->
</head>

<style>
  body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    background: #EBF0F3;
    padding-bottom: 18.3vw;
  }

  .order_top {
    height: 85.1vw;
  }

  .content-box {
    position: relative;
    margin-top: -14vw;
    margin-left: 3.2vw;
  }

  .content {
    width: 93.5vw;
    background: #FFFFFF;
    border-radius: 2.8vw;
    padding: 0 5.1vw 9.4vw 5.1vw;
    box-sizing: border-box;
  }

  .city-box {
    padding-top: 7.7vw;
  }

  .title {
    font-weight: 500;
    font-size: 4.2vw;
    color: #333333;
    margin-bottom: 4.3vw;
  }

  .required {
    font-weight: 400;
    font-size: 4.2vw;
    color: #FF4318;
  }

  .city-check {
    width: 83.3vw;
    height: 10.2vw;
    background: #F5F5F5;
    border-radius: 1.9vw;
    padding: 0 4.9vw 0 3.7vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }

  .city {
    font-weight: 400;
    font-size: 3.7vw;
    color: #D0D0D0;
    border: none;
    background: none;
    width: 80%;
  }

  .check-down {
    width: 3.4vw;
    height: 1.9vw;
  }

  .grey {
    font-size: 3.2vw;
    color: #9B9B9B;
    font-weight: 400;
  }

  .craft-box {
    display: flex;
    flex-wrap: wrap;

  }

  .craft {
    width: 26.3vw;
    height: 9.3vw;
    background: #F5F5F5;
    border-radius: 1.9vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.7vw;
    color: #333333;
    margin: 0 2.2vw 2.2vw 0;

  }

  .craft:nth-child(3n) {
    margin-right: 0;
  }

  .mobile-box {}

  .mobile {
    width: 83.3vw;
    height: 10.2vw;
    background: #F5F5F5;
    border-radius: 1.9vw;
    padding: 0 3.7vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 2.2vw;
  }

  .mobile-input {}

  .mobile-btn {
    width: 83.3vw;
    height: 10.2vw;
    background: #F5F5F5;
    border-radius: 1.9vw;
    padding: 0 3.7vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5.4vw;
  }

  .mobile-input {
    width: 100%;
    border: none;
    background: none;
  }

  .mobile-input-code {
    width: 57%;
  }

  .btn {
    border: none;
    background: none;
    font-size: 3.7vw;
    color: #FB8A4F;
  }

  .des {
    font-weight: 400;
    font-size: 3.2vw;
    color: #9B9B9B;
  }

  .button-box {
    position: fixed;

    width: 100%;
    left: 0;
    bottom: 0;
    height: 16.1vw;


    display: flex;
    align-items: center;
    justify-content: center;
    background: #EBF0F3;
  }

  .button {
    bottom: 2.2vw;
    left: 3.2vw;
    width: 93.5vw;
    height: 13.9vw;
    font-weight: 500;
    font-size: 4.6vw;
    border-radius: 1.9vw;
    background: linear-gradient(-90deg, #FB8A4F, #FDA77A);
    color: #FFFFFF;
    align-items: center;
    display: flex;
    justify-content: center;
  }

  input:focus {
    outline: none;
  }



  .city-mask-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000078;
    display: none;
  }

  .citys-bg {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #FFFFFF;
    border-radius: 2vw 2vw 0px 0px;
    padding: 7.7vw 0 2.2vw 0;
  }

  .city-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 4.6vw;
    color: #333333;
    padding: 0 7.6vw;
    box-sizing: border-box;
  }

  .city-ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: 8.3vw;
    margin-top: 6.4vw;
  }

  .city-li {
    width: 26.3vw;
    height: 9.3vw;
    background: #F5F5F5;
    border-radius: 1.9vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.7vw;
    margin: 0 2.2vw 2.2vw 0;
  }

  .city-button {
    width: 93.5vw;
    height: 13.9vw;
    background: linear-gradient(-90deg, #FB8A4F, #FDA77A);
    border-radius: 1.9vw;
    /* margin-bottom: 2.2vw; */
    margin-top: 5.4vw;
    margin-left: 3.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 4.6vw;
  }

  .close-img {
    width: 3.3vw;
    height: 3.3vw;
  }

  .selected {
    background-color: #FB8A4F !important;
    color: #fff !important;
    /* 选中时的背景色 */
  }

  input:-internal-autofill-previewed,
  input:-internal-autofill-selected {
    -webkit-text-fill-color: #333;
    transition: background-color 5000s ease-out 0.5s;
  }

  .modle {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
  }

  .msg {
    margin-top: 60vw;
    background-color: #0000009f;
    color: #fff;
    border-radius: 0.9vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3vw;
    line-height: 6vw;
    max-width: 80vw;
    flex-wrap: wrap;

  }
</style>

<body class="body">
  <image src="./images/order_top.png" class="order_top"></image>
  <div class="content-box">
    <div class="content">
      <div class="city-box">
        <div class="title">
          <span class="required">*</span> <span id="cert_confer_date">您所在的城市</span>
        </div>
      </div>
      <div class="city-check" onclick="openCity()">
        <input type="text" class="city " placeholder="请选择您所在的城市" value="">

        <image src="https://images.ayilaile.com/weapp/image/aunt/work/detail-down.png" class="check-down"> </image>
      </div>

      <div class="city-box">
        <div class="title">
          <span class="required">*</span> <span id="cert_confer_date">您需要什么类型的阿姨</span>
          <span class="grey">(单选)</span>
        </div>
      </div>
      <div class="craft-box">
        <div class="craft">育儿嫂</div>
        <div class="craft">月嫂</div>
        <div class="craft">家务员</div>
        <div class="craft">养老护理员</div>
        <div class="craft">包月小时工</div>
      </div>


      <div class="city-box">
        <div class="title">
          <span class="required">*</span> <span id="cert_confer_date">您的手机号码</span>
        </div>
      </div>

      <div class="mobile-box">
        <div class="mobile">
          <input type="tel" id="mobile" placeholder="请输入您的手机号码" maxlength="11" class="mobile-input">
        </div>
        <div class="mobile-btn">
          <input type="tel" id="code" placeholder="请输入验证码" maxlength="6" class="mobile-input mobile-input-code">
          <button class="btn" onclick="getCode()">获取验证码</button>
        </div>
        <div class="des">留下联系方式后，我们的专属客服会主动与您联系，为您提供个性化服务~</div>
      </div>
    </div>
  </div>
  </div>


  <div class="button-box" onclick="submitForm()">
    <div class="button">立即预约</div>
  </div>


  <div class="city-mask-box">
    <div class="citys-bg">
      <div class="city-title">
        <div>选择城市</div>
        <div onclick="closeCity()">
          <image class="close-img" src="https://images.ayilaile.com/weapp/image/aunt/work/close-black.png"></image>
        </div>
      </div>
      <div class="city-ul">
      </div>
      <div class="city-button">确定</div>
    </div>
  </div>

  <div class="modle">
    <div class="msg">预约成功！稍后会有工作人员联系您，请保持电话畅通！</div>
  </div>


</body>

<script>
  let formToken = ''
  let params = { appid: '58A080C5-9FC8-48E5-873A-C92D6682BCBC' };
  let BASE_URL = 'https://v6.ayilaile.com'
  getParams()
  getCitys()
  getToken()

  let selectedCraft = null;
  let selectedCity = null;
  let selectedCityFlag = null;

  const cityUl = document.querySelector('.city-ul');
  const confirmButton = document.querySelector('.city-button');
  confirmButton.addEventListener('click', () => {
    if (!selectedCityFlag) {
      document.querySelector('.msg').innerHTML = '请选择您所在的城市'
      document.querySelector('.modle').style.display = 'block';
      setTimeout(() => {
        document.querySelector('.modle').style.display = 'none';
      }, 2000)
    } else {
      selectedCity = selectedCityFlag.city
      closeCity();
      document.querySelector('.city').value = selectedCity;
      document.querySelector('.city').style.color = '#333333';
    }
  });


  document.addEventListener('DOMContentLoaded', function () {
    const crafts = document.querySelectorAll('.craft');
    crafts.forEach(craft => {
      craft.addEventListener('click', function () {
        crafts.forEach(c => c.classList.remove('selected')); // 移除所有选中状态
        this.classList.add('selected'); // 添加选中状态到当前点击的元素
        selectedCraft = this.textContent; // 保存选中的值
      });
    });
  });


  function getCitys() {
    // let BASE_URL = 'https://test-v6.ayilaile.com'
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `${BASE_URL}/pub/cities`, true);
    xhr.setRequestHeader("appid", params.appid);

    let cityData = [];
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        // 请求成功
        const response = JSON.parse(xhr.responseText);
        console.log('Success:', response);
        cityData = response.data;

        if (params.district) {
          cityData.forEach(item => {
            if (item.dist_code == params.district) {
              selectedCityFlag = item;
              selectedCity = item.city;
              document.querySelector('.city').value = selectedCity;
              document.querySelector('.city').style.color = '#333333';
            }
          })
        }


        // 动态生成 city-li
        cityData.forEach(item => {
          const li = document.createElement('div');
          li.className = 'city-li';
          li.textContent = item.city;

          // 绑定点击事件
          li.addEventListener('click', () => {
            // 移除其他项的选中状态
            document.querySelectorAll('.city-li').forEach(li => li.classList.remove('selected'));
            // 设置当前项为选中状态

            li.classList.add('selected');
            selectedCityFlag = item;
          });

          // 添加到容器中
          cityUl.appendChild(li);
        });
        // 这里处理接口返回的数据
      } else {
        // 请求失败
        console.error('Error:', xhr.statusText);
        // 这里处理错误情况
      }
    };
    // 监听onerror事件处理错误
    xhr.onerror = function () {
      console.error('Request error:', xhr.statusText);
      // 这里处理错误情况
    };

    // 发送请求
    xhr.send();
  }


  function getParams() {
    const url = window.location.href;
    // const url = "https://test-api.ayilaile.com/h5/cert_query/?id=8E1BD9FC-5AB2-4387-A3AF-3D191D7F454D&key=cb8c254969c0eb1c0a3583ccd947c438"
    const urlParts = url.split("?")[1];
    const paramsArray = urlParts.split("&");
    paramsArray.forEach(param => {
      const paramParts = param.split("=");
      const paramName = decodeURIComponent(paramParts[0]);
      const paramValue = decodeURIComponent(paramParts[1]);
      params[paramName] = paramValue.split('#')[0];

    });
    console.log('params' + params.appid);

  }

  function openCity() {
    document.querySelector('.city-mask-box').style.display = 'block';
  }

  function closeCity() {
    document.querySelector('.city-mask-box').style.display = 'none';
  }


  function getCode() {
    var mobileValue = document.getElementById("mobile").value;
    var codeValue = document.getElementById("code").value;

    if (!mobileValue || mobileValue.length != 11) {
      document.querySelector('.msg').innerHTML = '请输入您的手机号码'
      document.querySelector('.modle').style.display = 'block';
      setTimeout(() => {
        document.querySelector('.modle').style.display = 'none';
      }, 2000)
    } else {
      let innerCode = document.querySelector('.btn').innerHTML
      if (innerCode == '获取验证码') {
        // let BASE_URL = 'https://test-v6.ayilaile.com'
        const xhr = new XMLHttpRequest();
        xhr.open('POST', `${BASE_URL}/pub/sendCode`, true);
        xhr.setRequestHeader("appid", params.appid);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.onload = function () {
          if (this.status >= 200 && this.status < 300) {
            const response = JSON.parse(xhr.responseText);
            document.querySelector('.msg').innerHTML = response.message
            document.querySelector('.modle').style.display = 'block';
            setTimeout(() => {
              document.querySelector('.modle').style.display = 'none';
            }, 2000)
            let num = 60
            let timer = setInterval(function () {
              if (num == 1) {
                document.querySelector('.btn').innerHTML = '获取验证码'
                clearInterval(timer)
              } else {
                num -= 1
                document.querySelector('.btn').innerHTML = num + '秒后重新获取'
              }
            }, 1000)
          }

        }
        xhr.send("mobile=" + mobileValue);


      }

    }


  }


  function getToken() {
    // let BASE_URL = 'https://test-v6.ayilaile.com'
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `${BASE_URL}/pub/formToken`, true);
    xhr.setRequestHeader("appid", params.appid);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        const response = JSON.parse(xhr.responseText);
        console.log('Success:', response);
        formToken = response.data;
      }

    }
    xhr.send();
  }


  function submitForm(e) {
    var codeValue = document.getElementById("code").value;
    var mobileValue = document.getElementById("mobile").value;


    if (!selectedCity) {
      document.querySelector('.msg').innerHTML = '请选择您所在的城市'
      document.querySelector('.modle').style.display = 'block';
      setTimeout(() => {
        document.querySelector('.modle').style.display = 'none';
      }, 2000)
    } else if (!selectedCraft) {
      document.querySelector('.msg').innerHTML = '请选择您需要的阿姨类型'
      document.querySelector('.modle').style.display = 'block';
      setTimeout(() => {
        document.querySelector('.modle').style.display = 'none';
      }, 2000)
    } else if (!mobileValue || mobileValue.length != 11) {
      document.querySelector('.msg').innerHTML = '请输入您的手机号码'
      document.querySelector('.modle').style.display = 'block';
      setTimeout(() => {
        document.querySelector('.modle').style.display = 'none';
      }, 2000)
    }
    else if (!codeValue || codeValue.length != 6) {
      document.querySelector('.msg').innerHTML = '请输入验证码'
      document.querySelector('.modle').style.display = 'block';
      setTimeout(() => {
        document.querySelector('.modle').style.display = 'none';
      }, 2000)
    } else {
      // 提交表单
      // let BASE_URL = 'https://test-v6.ayilaile.com'
      const xhr = new XMLHttpRequest();
      xhr.open('POST', `${BASE_URL}/pub/order`, true);
      xhr.setRequestHeader("appid", params.appid);
      xhr.setRequestHeader("User-Token", formToken);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

      let cityData = [];
      xhr.onload = function () {
        if (this.status >= 200 && this.status < 300) {
          // 请求成功
          const response = JSON.parse(xhr.responseText);
          console.log('Success:', response);
          document.querySelector('.msg').innerHTML = response.message
          document.querySelector('.modle').style.display = 'block';
          setTimeout(() => {
            document.querySelector('.modle').style.display = 'none';
          }, 2000)
          // 这里处理接口返回的数据
        } else {
          // 请求失败
          console.error('Error:', xhr.statusText);
          // 这里处理错误情况
        }
      };
      // 监听onerror事件处理错误
      xhr.onerror = function () {
        console.error('Request error:', xhr.statusText);
        // 这里处理错误情况
      };
      let data = "addr_district=" + selectedCityFlag.dist_code + '&craft=' + selectedCraft + '&mobile=' + mobileValue + '&code=' + codeValue;
      // 发送请求
      xhr.send(data);
    }

  }
</script>

</html>